<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
          
        <button id="clickBtn1" onclick="fn()" ondblclick="fn1()">单击/双击按钮1</button>
          <!-- <button onclick="fn()" ondblclick="fn1()">单击/双击2</button> -->
    <script>
    // 练习:单击时触发单击事件， 双击时只触发双击事件
    // BOM:setTimeOut()
    // fbtn.addEventListener('click',fn);
    // btn.addEventListener('dblclick',fn1);
    //------------------------------------------------------------

    //    单击
    // var clickTimer = null;说
    //     function fn() {
    //     clearTimeout(clickTimer);  //首先清除计时器
    //     clickTimer = setTimeout(() => {
    //         alert('2班')
    //     },200);
    // }

    //     双击
    // function fn1() {
    //     clearTimeout(clickTimer);
    //      alert('4班');   
    // }
    //-------------------------------------------------------
    //    单击
//     var clickBtn = document.getElementById("clickBtn1");
//     var clickTimer = null;
//     clickBtn.onclick = function () {
//         clearTimeout(clickTimer)//首先清除计时器
//         clickTimer = setTimeout(() => {
//           alert('2班')
//         },200);
//     }
//    //     双击
//     clickBtn.ondblclick = function () {
//         clearTimeout(clickTimer);//首先清除计时器
//         alert('4班');   
//     }
//     //--------------------------------------------------------
    var clickBtn = document.getElementById('clickBtn1')
    var num = 0
    function fn(){
        num = 0
        time = setTimeout(danji,230)
    }
    function danji(){
        if (num==0) {
            alert('2班')
        }
        clearTimeout(time)
    }
    function fn1(){
          num++
         alert('4班')
    }
    </script>

</body>
</html>